<template>
    <div class="left-bar">
        <div class="title">
            <img src="/icons/icon.png" class="logo">
            <span>校务管理</span>
        </div>
        <el-tabs type="border-card" tab-position="left">
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="Total">
                <template #label>
                    <span class="custom-tabs-label">
                    <el-icon><img src="/icons/total_off.png" alt=""></el-icon>
                    <span>总览</span>
                    </span>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        name: 'NavBar'
    })
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
<style scoped lang="scss">
    .left-bar {
        width: 200px;
        height: 100%;
        background-color: #f5f5f5;
        
        .title{
            width: 100%;
            height: 80px;
            background-color: #fff;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo{
                width: 40px;
            }
    }
</style>